<template>
  <div>
    <div style="margin-bottom: 0px;margin-top: 12px">


      <LCt v-show="false"/>
      <el-form :model="data" label-width="100px" ref="filterForm">
        <el-row>
          <el-col :span="3">
            <el-form-item prop="type">
              <span style="font-size: 18px;font-family: 楷体"><b></b></span>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">
                      <el-form-item label="交叉粒度" prop="port">
                        <el-input v-model="data.port" placeholder="请输入交叉粒度"></el-input>
                      </el-form-item>
                    </el-col>-->
          <el-col :span="6">
            <el-form-item label="类型" prop="type">
              <el-select v-model="data.type" placeholder="请选择类型" clearable style="width: 100%">
                <el-option value="EOO"></el-option>
                <el-option value="EOS"></el-option>
                <el-option value="SDH"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="data.info" placeholder="请输入关键信息进行查询"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label-width="0px">
              <el-button type="info">查找</el-button>
              <el-button type="success">刷新</el-button>
              <el-button type="primary" @click="toCreate">创建</el-button>
            </el-form-item>
            <el-form-item>

            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
        :data="connections.connection"
        @row-dblclick="toDetail"
        style="width: 100%">
      <el-table-column
          label="交叉名称"
          sortable
          prop="name">
      </el-table-column>
      <el-table-column
          label="UNI"
          prop="uni">
      </el-table-column>
      <el-table-column
          label="主用"
          prop="pr">
      </el-table-column>
      <el-table-column
          label="备用"
          prop="se">
      </el-table-column>
      <el-table-column
          label="交叉类型"
          prop="type">
      </el-table-column>
      <el-table-column
          label="保护类型"
          prop="pg">
      </el-table-column>
      <el-table-column
          label="ODU时隙"
          prop="ts">
      </el-table-column>
    </el-table>


    <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false"
        :modal="true"
        size="80%">
      <XcPac style="margin-left: 16px;"/>
    </el-drawer>

    <el-dialog
        :visible.sync="xcFormVisible"
        width="1400"
        :close-on-click-modal="false">
      <XcPac/>
    </el-dialog>

    <el-dialog
        :visible.sync="imgVisible"
        width="1400"
        :close-on-click-modal="true">
      <el-image
          style="width: auto; height: auto;"
          :src="require('@/assets/union/create-eth.jpg')">
      </el-image>
    </el-dialog>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import XcPac from "@/components/xc/XcPac";
import LCt from "@/components/test/LCt";

export default {
  name: 'XcConnections',
  components: {LCt, XcPac},
  data() {
    return {
      imgVisible: false,
      xcFormVisible: false,
      drawer: false,
      connections: {
        "connection": [
          {
            "name": "CONNECTION=ETH1",
            "ctp": [
              "PTP=/shelf=1/slot=1/subslot=1/port=8/CTP=8",
              "FTP=/shelf=1/slot=1/subslot=1/port=108/CTP=16"
            ],
            "requested-capacity": {
              "total-size": 0,
              "pbs": 130048,
              "pir": 1000,
              "cbs": 130048,
              "cir": 1000
            },
            "state-pac": {
              "admin-state": "enabled",
              "operational-state": "up"
            },
            "layer-protocol-name": "acc-eth:ETH",
            "pg-id": 0,
            "service-type": "EPL",
            uni: 'ptp=1',
            pr: 'ptp=3',
            se: 'ptp=4',
            type: 'SDH',
            pg: 'SNCP1+1',
            ts: '8-02'
          },
          {
            "name": "CONNECTION=SDH2",
            "ctp": [
              "PTP=/shelf=1/slot=1/subslot=1/port=8/CTP=8",
              "FTP=/shelf=1/slot=1/subslot=1/port=108/CTP=16"
            ],
            "requested-capacity": {
              "total-size": 0,
              "pbs": 130048,
              "pir": 1000,
              "cbs": 130048,
              "cir": 1000
            },
            "state-pac": {
              "admin-state": "enabled",
              "operational-state": "up"
            },
            "layer-protocol-name": "acc-eth:ETH",
            "pg-id": 0,
            "service-type": "EPL",
            uni: 'ptp=6',
            pr: 'ptp=9',
            se: 'ptp=8',
            type: 'SDH',
            pg: 'SNCP1+1',
            ts: '8-10'
          },
          {
            "name": "CONNECTION=ODU3",
            "ctp": [
              "PTP=/shelf=1/slot=1/subslot=1/port=8/CTP=8",
              "FTP=/shelf=1/slot=1/subslot=1/port=108/CTP=16"
            ],
            "requested-capacity": {
              "total-size": 0,
              "pbs": 130048,
              "pir": 1000,
              "cbs": 130048,
              "cir": 1000
            },
            "state-pac": {
              "admin-state": "enabled",
              "operational-state": "up"
            },
            "layer-protocol-name": "acc-eth:ETH",
            "pg-id": 0,
            "service-type": "EPL",
            uni: 'ptp=10',
            pr: 'ptp=13',
            se: 'ptp=12',
            type: 'EOS',
            pg: 'NCP',
            ts: '8-11'
          }
        ]
      },
      data: {
        port: '',
        type: '',
      }
    }
  },
  methods: {
    toCreate() {
      // this.xcFormVisible = true;
      this.drawer = true;

      // this.$router.push('/ne_center/xcs/config');
    },
    toDetail() {
      this.imgVisible = !this.imgVisible;
    }
  }
}
</script>
<style>
.el-icon-close:before {
  content: "\e6db";
  color: black;
}
</style>